<template>
  <el-container direction="vertical" v-bind:style="ecstyle">
      <el-row :gutter="10">
      <el-date-picker style="width:99%;margin-bottom:10px" value-format="yyyy-MM-dd" v-model="filterForm.timeRange" type="daterange" align="right" range-separator="至" start-placeholder="开始" end-placeholder="结束" @change="changeHandler" :clearable="false">
          </el-date-picker>
      </el-row>
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="grid-content bg-purple-light" style="background-color:#FFFFFF;">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-s-order" style="font-size:50px;color:#3c8dbc;" />
              </el-row>
              <el-row>
                <span>支付订单数</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <span style="line-height:100px;font-size:30px;color:#3c8dbc;">{{ stat.orderPayCount }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light" style="height:100px;">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-s-release" style="font-size:50px;color:#3c8dbc;" />
              </el-row>
              <el-row>
                <span>退款订单数</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <span style="line-height:100px;font-size:30px;color:#3c8dbc;">{{ stat.refundOrderCount }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-shopping-cart-2" style="font-size:50px;color:green;" />
              </el-row>
              <el-row>
                <span>销售额</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <!-- <i class="el-icon-top" style="font-size:25px;color:green;" /> -->
              <span style="line-height:100px;font-size:30px;color:green;">{{ stat.salesOrderSum /100 }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-shopping-cart-full" style="font-size:50px;color:red;" />
              </el-row>
              <el-row>
                <span>销售量</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <!-- <i class="el-icon-bottom" style="font-size:25px;color:red;" /> -->
              <span style="line-height:100px;font-size:30px;color:red;">{{ stat.salesOrderNum }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-mobile-phone" style="font-size:50px;" />
              </el-row>
              <el-row>
                <span>在架商品数</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <span style="line-height:100px;font-size:30px;">{{ stat.productCount }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="12" style="height:100px;">
              <el-row style="padding-top:10px;">
                <i class="el-icon-box" style="font-size:50px;" />
              </el-row>
              <el-row>
                <span>销售商品数</span>
              </el-row>
            </el-col>
            <el-col :span="12" style="height:100px;">
              <span style="line-height:100px;font-size:30px;">{{ stat.productPayCount }}</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row style="height:10px;"></el-row>
    <!-- <el-row :gutter="10">
      <el-col :span="8">
        <div class="grid-content bg-purple-light" style="height:350px;">
          <div id="div_chart" style="width:100%;height:100%;top:10px;"></div>
          
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light" style="height:350px;">
          <div id="second_chart" style="width:100%;height:100%;top:10px;"></div>
          
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light" style="height:350px;">
          <div id="third_chart" style="width:100%;height:100%;top:10px;"></div>
         
        </div>
      </el-col>
    </el-row> -->
    <!-- <el-row style="height:10px;"></el-row> -->
    <el-row :gutter="10" style="margin-top:10px">
      <el-col :span="12">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="border-bottom:1px solid #CCCCCC;">
          <el-breadcrumb-item>单品本周销售TOP5</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="stat.productWeekList" style="width: 100%" height="300">
          <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="weekSum" label="本周销量"></el-table-column>
          <el-table-column prop="sum" label="总销量"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="border-bottom:1px solid #CCCCCC;">
          <el-breadcrumb-item>单品累计销售TOP5</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="stat.productList" style="width: 100%" height="300">
          <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="weekSum" label="本周销量"></el-table-column>
          <el-table-column prop="sum" label="总销量"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin-top:10px">
      <el-col :span="12">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="border-bottom:1px solid #CCCCCC;">
          <el-breadcrumb-item>本周门店销量TOP5</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="stat.shopWeekList" style="width: 100%" height="300">
          <el-table-column prop="shopName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="weekSum" label="本周销量"></el-table-column>
          <el-table-column prop="sum" label="总销量"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="border-bottom:1px solid #CCCCCC;">
          <el-breadcrumb-item>累计门店销量T0P5</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table :data="stat.shopList" style="width: 100%" height="300">
          <el-table-column prop="shopName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="weekSum" label="本周销量"></el-table-column>
          <el-table-column prop="sum" label="总销量"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-container>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      tableData: null,
      filterForm: {
          timeRange: [this.getNowFormatDate(10), this.getNowFormatDate(0)],
        },
    //   timeRange: [this.getNowFormatDate(10), this.getNowFormatDate(0)],
    //   secondValue: [this.getNowFormatDate(10), this.getNowFormatDate(0)],
    //   thirdValue: [this.getNowFormatDate(10), this.getNowFormatDate(0)],
      stat: {
        salesOrderSum: null,
        salesOrderNum: null,
        orderPayCount: null,
        refundOrderCount: null,
        productCount: null,
        productPayCount: null,
        productWeekList: [],
        productList: [],
        shopWeekList: [],
        shopList: [],
      },
      ecstyle: {
        height: "100px"
      }
    };
  },
  mounted() {
    // window.onresize = () => {
    //   return (() => {
    //     var divHeight = document.body.clientHeight - 120;
    //     this.ecstyle.height = divHeight + "px";
    //   })();
    // };
    // this.secondChart();
    // this.thirdChart();
    this.loadHome();
    // this.changeHandler();
    // this.changeRebateHandler();
    // this.changeCancelHandler();
  },
  created() {
    var divHeight = document.body.clientHeight - 120;
    this.ecstyle.height = divHeight + "px";
  },
  methods: {
    /**
     * 获取订单统计数据
     */
    // firstChart: function (datas) {
    //   // let this_ = this;
    //   let myChart = echarts.init(document.getElementById("div_chart"));
    //   let option = {
    //     title: { text: "日订单销量" },
    //     color: ["#f44"],
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow"
    //       }
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: datas["x"], //["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    //         axisTick: {
    //           alignWithLabel: true
    //         }
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: "value"
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "订单数量",
    //         type: "line",
    //         barWidth: "60%",
    //         data: datas["y"] //[995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
    //       }
    //     ]
    //   };
    //   myChart.setOption(option);

    //   window.addEventListener("resize", function () {
    //     myChart.resize();
    //   });
    // },
    // secondChart: function (datas) {
    //   let secondChart = echarts.init(document.getElementById("second_chart"));
    //   let option = {
    //     title: { text: "渠道订单量" },
    //     color: ["#f44"],
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow"
    //       }
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: datas["x"], //["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    //         axisTick: {
    //           alignWithLabel: true
    //         }
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: "value"
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "订单数量",
    //         type: "bar",
    //         barWidth: "60%",
    //         data: datas["y"] //[995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
    //       }
    //     ]
    //   };
    //   secondChart.setOption(option);
    //   window.addEventListener("resize", function () {
    //     secondChart.resize();
    //   });
    // },
    // thirdChart: function (datas) {
    //   let secondChart = echarts.init(document.getElementById("third_chart"));
    //   let option = {
    //     title: { text: "渠道核销统计" },
    //     color: ["#f44"],
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow"
    //       }
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: datas["x"], // ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    //         axisTick: {
    //           alignWithLabel: true
    //         }
    //       }
    //     ],
    //     yAxis: [
    //       {
    //         type: "value"
    //       }
    //     ],
    //     series: [
    //       {
    //         name: "核销统计",
    //         type: "line",
    //         barWidth: "60%",
    //         data: datas["y"] //[995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356]
    //       }
    //     ]
    //   };
    //   secondChart.setOption(option);
    //   window.addEventListener("resize", function () {
    //     secondChart.resize();
    //   });
    // },
    loadHome: function () {
      this.axios
        .post("/fc/stat/summery",this.filterForm )
        .then(response => {
          // console.log("获取用户数据 - " + JSON.stringify(response.data));
          if (response.data.code == 200) {
            this.stat.salesOrderSum = response.data.data.salesOrderSum == null ? 0 : response.data.data.salesOrderSum;
            this.stat.salesOrderNum = response.data.data.salesOrderNum == null ? 0 : response.data.data.salesOrderNum;
            this.stat.orderPayCount = response.data.data.orderPayCount == null ? 0 : response.data.data.orderPayCount;
            this.stat.refundOrderCount = response.data.data.refundOrderCount == null ? 0 : response.data.data.refundOrderCount;
            this.stat.productCount = response.data.data.productCount == null ? 0 : response.data.data.productCount;
            this.stat.productPayCount = response.data.data.productPayCount == null ? 0 : response.data.data.productPayCount;
            this.stat.productWeekList = response.data.data.productWeekList == null ? [] : response.data.data.productWeekList;
            this.stat.productList = response.data.data.productList == null ? [] : response.data.data.productList;
            this.stat.shopWeekList = response.data.data.shopWeekList == null ? [] : response.data.data.shopWeekList;
            this.stat.shopList = response.data.data.shopList == null ? [] : response.data.data.shopList;
          } else if (response.data.code == 201) {
          } else if (response.data.code == 202) {
            // console.log("获取用户数据 - " + JSON.stringify(response.data));
            this.$router.push("/login");
          }
        })
        .catch(response => {
          console.log("response -   " + response);
        });
    },
    // changeHandler() {
    //   this.axios
    //     .post("/fc/stat/nearly/" + this.filterForm.timeRange[0] + "/" + this.filterForm.timeRange[1])
    //     .then(response => {
    //       this.firstChart(response.data.data);
    //     })
    //     .catch(response => {
    //       console.log("response -   " + response);
    //     });
    // },
    // changeRebateHandler: function () {
    //   this.axios
    //     .post("/fc/stat/rebate/" + this.filterForm.timeRange[0] + "/" + this.filterForm.timeRange[1])
    //     .then(response => {
    //       this.secondChart(response.data.data);
    //     })
    //     .catch(response => {
    //       console.log("response -   " + response);
    //     });
    // },
    // changeCancelHandler: function () {
    //   this.axios
    //     .post("/fc/stat/cancel/" + this.filterForm.timeRange[0] + "/" + this.filterForm.timeRange[1])
    //     .then(response => {
    //       this.thirdChart(response.data.data);
    //     })
    //     .catch(response => {
    //       console.log("response -   " + response);
    //     });
    // },
    changeHandler() {
        this.loadHome();
    },
    getNowFormatDate: function (day) {
      var date = new Date();
      var targetday_milliseconds = date.getTime() - 1000 * 60 * 60 * 24 * day;

      date.setTime(targetday_milliseconds);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  }
};
</script>
<style scoped>
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple-light {
  background-color: #ffffff;
}
.el-row {
  text-align: center;
}
.el-col {
  text-align: center;
}
.bg-purple {
  background: #d3dce6;
}
.el-breadcrumb {
  background-color: #ffffff;
  height: 40px;
}
.el-breadcrumb span {
  line-height: 40px;
  font-size: 15px;
  font-weight: 700;
  margin-left: 10px;
}
.el-divider div {
  margin: 0px;
}
</style>
